<template>
  <div class="clientType">
    <global-card>
      <template #leftTitle>
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
        >
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="vipDesc" label="会员特权描述" align="center"/>
          <el-table-column prop="createByName" label="创建人" align="center"/>
          <el-table-column label="创建时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column prop="updateByName" label="更新人" align="center"/>
          <el-table-column label="更新时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="{ row }">
              <perButton label="修改富文本" type="primary" size="mini" perms="PROTOCOL_EDIT"
                         @click="handlerTouch(row)"></perButton>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </global-card>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
      :show-center="false"
    >
      <template #content>
<!--        <div class="dialog-content">-->
          <el-upload
            :action="$uploadUrl + upload"
            class="avatar-uploader-quill"
            style="display: none;"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleLogoSuccess2"
          >
          </el-upload>
          <quill-editor v-model="richText"
                        :options="editorOption"
                        class="ql-editor"
                        ref="myQuillEditor"
          ></quill-editor>
<!--        </div>-->
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
  import { quillEditor, Quill } from "vue-quill-editor"
  import ImageResize from "quill-image-resize-module" //调整图片大小
  Quill.register("modules/imageResize", ImageResize)
  import "quill/dist/quill.core.css"
  import "quill/dist/quill.snow.css"
  import "quill/dist/quill.bubble.css"


  import ycDialog from "@/components/pageDialog"
  import perButton from "@/components/permissionButton"
  import {
    queryVipTqList,
    updateVipTq,
    queryOneVipTq
  } from "@/api/basicSetupManagement/vipDiscountRule"
  import { getToken } from "@/utils/auth"

  export default {
    components: {
      ycDialog,
      perButton,
      quillEditor
    },
    data() {
      return {
        tableData: [],
        searchForm: {
          agreementName: "",
          agreementType: ""
        },

        detailsDisabled: false,
        isGlobalMessageShow: false,

        dialogCenterTitle: "",
        dialogTitle: "",
        message: "",
        richText: "",
        editorOption: {
          placeholder: "",
          quill: "",
          modules: {
            imageResize: { // 调整图片大小配置
              displayStyles: {
                backgroundColor: "black",
                border: "none", // 是否加边框
                color: "white" // 拖拽时，图片右下角尺寸文字颜色
              },
              modules: ["Resize", "DisplaySize", "Toolbar"] // 工具包：允许拖拽、显示尺寸、对齐方式
            },
            toolbar: {
              container: [ // 工具栏配置
                ["bold", "italic", "underline", "strike"],          //加粗，斜体，下划线，删除线
                [{ "size": ["small", false, "large", "huge"] }],    // 字体大小
                [{ "header": [1, 2, 3, 4, 5, 6, false] }],          //几级标题
                [{ "color": [] }, { "background": [] }],            // 字体颜色，字体背景颜色
                [{ "align": [] }],                                  //对齐方式
                [{ "indent": "-1" }, { "indent": "+1" }],           // 缩进
                [{ "list": "ordered" }, { "list": "bullet" }],      //列表
                [{ "script": "sub" }, { "script": "super" }],       // 上下标
                ["blockquote", "code-block"],                       //引用，代码块
                ["clean"],                                          //清除字体样式
                ["image", "video"]                                  //上传图片、上传视频
              ],
              handlers: {
                image: (value) => {
                  if (value) {
                    // 调用element的图片上传组件
                    document.querySelector(".avatar-uploader-quill input").click()
                  } else {
                    this.quill.format("image", false)
                  }
                }
              }
            }

          }
        },
        headers: {
          token: getToken()
        },
        upload: "/uploadManager/upload",
        loading: false,
        addOrUpdateLoading: false
      }
    },
    created() {
      this.getData()
    },
    methods: {
      async searchClick() {
        this.getData()
      },
      async getData() {
        const { agreementName, agreementType } = this.searchForm
        this.loading = true
        const data = await queryVipTqList()
        this.tableData = data.object
        this.loading = false
      },
      pagination(pageItem) {
        this.getData(pageItem.page, pageItem.limit)
      },

      // 修改富文本
      handlerTouch(row) {
        this.dialogCenterTitle = "修改富文本"
        this.dialogTitle = "修改富文本"

        this.tableDataItem = row
        this.queryOneVipTq()


        this.detailsDisabled = false
        this.addOrUpdateLoading = false
        this.$refs.ycDialog.dialogVisible = true
      },

      async queryOneVipTq() {
        const { object } = await queryOneVipTq({
          id: this.tableDataItem.id
        })
        if (object) {
          this.richText = object.richText
        }
      },
      handleLogoSuccess2(id, file) {
        let quill = this.$refs.myQuillEditor.quill
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, "image", file.response.object.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      },

      async dialogSave() {
        console.log(this.richText)
        if(!this.richText) {
          this.$message({
            message: "请填写富文本内容",
            type: "warning"
          })
          return
        }
        this.addOrUpdateLoading = true
        const { status, message } = await updateVipTq({
          id: this.tableDataItem.id,
          richText: this.richText
        })
        if (status == "200") {
          this.$message({
            message: message,
            type: "success"
          })
          this.getData()
          this.$refs.ycDialog.dialogVisible = false
        }

        this.addOrUpdateLoading = false
      },

      receive() {
        this.isGlobalMessageShow = false
      },

      refresh() {
        this.searchForm = {
          agreementName: "",
          agreementType: ""
        }
        this.getData()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .clientType {
    .title-container {
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;

      .left-box {
        display: flex;

        .formClass {
          /*display: flex;*/
          /*margin-right: 20px;*/

          .el-form-item {
            margin-top: 20px;
            margin-bottom: 0;

            .el-input {
              width: 216px;
            }

            .el-select {
              width: 171px;
              margin-left: 10px;
            }

            .el-date-editor {
              width: 336px;
              margin-left: 10px;
            }
          }
        }

        /*.el-button {*/
        /*  // width: 42px;*/
        /*  height: 36px;*/
        /*  margin-top: 20px;*/
        /*}*/
      }
    }
  }
</style>
